<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8">
        <title>Three.js Chapter 1</title>
        <style type="text/css">
            body {
                padding: 0;
                margin: 0;
                overflow: hidden;
            }
        </style>
        <script src="assets/javascripts/three.js" type="text/javascript" charset="utf-8" async defer></script>
        <script type="text/javascript" src="assets/javascripts/dat.gui.min.js"></script>
        <script type="text/javascript" src="assets/javascripts/stats.min.js"></script>
        <script type="text/javascript">
            var scene, camera, renderer, stats;

            function init() {
                scene = new THREE.Scene();
                renderer = new THREE.WebGLRenderer();
                renderer.setClearColor(0x000000, 1.0);
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.shadowMapEnabled = true;

                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
                camera.position.set(15, 16, 13);
                camera.lookAt(scene.position);

                initLight();
                initObject();


                control = new function() {
                    this.rotationSpeed = 0.005;
                    this.opacity = 0.6;
                    this.color = boxMaterial.color.getHex();
                };

                addControlGui(control);
                document.body.appendChild(renderer.domElement);

                addStatsObject();
                render();
            }
            var boxMaterial;

            function initObject() {
                var boxGeometry = new THREE.BoxGeometry(6, 4, 6);
                boxMaterial = new THREE.MeshLambertMaterial({
                    color: 0xFF0000,
                    transparent: true,
                    opacity: 0.6
                });

                var box = new THREE.Mesh(boxGeometry, boxMaterial);
                box.castShadow = true;
                box.name = "box";
                scene.add(box);

                var planeGeometry = new THREE.PlaneBufferGeometry(20, 20);
                var planeMaterial = new THREE.MeshLambertMaterial({
                    color: 0xCCCCCC
                });

                var plane = new THREE.Mesh(planeGeometry, planeMaterial);
                plane.rotation.x = -90 * Math.PI / 180
                plane.castShadow = true;
                plane.receiveShadow = true;
                plane.position.y = -2;

                scene.add(plane);
            }

            function addStatsObject() {
                stats = new Stats();
                stats.setMode(0);
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.left = '0px';
                stats.domElement.style.top = '0px';
                document.body.appendChild(stats.domElement);
            }

            function initLight() {
                var spotLight = new THREE.SpotLight(0xFFFFFF);
                spotLight.position.set(10, 20, 20);
                spotLight.castShadow = true;
                spotLight.shadowCameraNear = 20;
                spotLight.shadowCameraFar = 50;
                scene.add(spotLight);
                // light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
                // light.position.set( 10, 20, 20 );
                // light.position.multiplyScalar( 1.3 );

                // light.castShadow = true;
                // //light.shadowCameraVisible = true;

                // light.shadowMapWidth = 1024;
                // light.shadowMapHeight = 1024;

                // var d = 300;

                // light.shadowCameraLeft = -d;
                // light.shadowCameraRight = d;
                // light.shadowCameraTop = d;
                // light.shadowCameraBottom = -d;

                // light.shadowCameraFar = 1000;
                // light.shadowDarkness = 0.5;
                // scene.add( light );
            }

            function addControlGui(controlObject) {
                var gui = new dat.GUI();
                gui.add(controlObject, 'rotationSpeed', -0.10, 0.10);
                gui.add(controlObject, 'opacity', 0.1, 1);
                gui.addColor(controlObject, 'color');
            }

            function render() {
                var rotSpeed = control.rotationSpeed;
                camera.position.x = camera.position.x * Math.cos(rotSpeed) + camera.position.z * Math.sin(rotSpeed);
                camera.position.z = camera.position.z * Math.cos(rotSpeed) - camera.position.x * Math.sin(rotSpeed);
                camera.lookAt(scene.position);

                var cube = scene.getObjectByName('box')
                cube.material.opacity = control.opacity;
                scene.getObjectByName('box').material.color = new THREE.Color(control.color);
                stats.update();
                renderer.render(scene, camera);
                requestAnimationFrame(render);
            }

            window.onload = init;
        </script>
    </head>

    <body>
    </body>

</html>
